<!--
 * @Author: hucc
 * @Date: 2021-10-12 15:27:02
 * @LastEditors: hucc
 * @LastEditTime: 2021-10-12 19:19:02
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{attr}}----{{msg}}----{{obj}}
    </div>
    <script>
        let mixin = {
                data() {
                    return {
                        msg: '我是mixin混入数据',
                        obj: {
                            name: 'zs'
                        }
                    }
                },
                methods: {
                    foo() {
                        console.log('this is mixin fun')
                    },
                },
                created() {
                    console.log('this is mixin created');
                    this.foo();

                }
            }
            //混入有全局混入 局部混入 一般使用局部混入
        let vm = new Vue({
                el: '#app',
                data: {
                    attr: '我是vue根实例数据',
                    obj: {
                        age: 12
                    }
                },
                methods: {
                    foo() {
                        console.log('this is vue fun')
                    }
                },
                created() {
                    console.log('this is vue created');
                    this.foo();
                },
                mixins: [mixin]
            })
            //函数执行结果：//this is mixin created 5-混入.html:39:29
            // this is vue fun 5-混入.html:55:29
            // this is vue created 5-混入.html:59:25
            // this is vue fun
    </script>
</body>

</html>